<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
     一般字符串："Cai"  'Lily'
    模板字符串：`Cai`
   
 -->

<body>
    <script>
        //   const username1 = "Cai";
        //   const username2 = `Cai`;
        //   console.log(username1, username2); //Cai Cai
        //   console.log(username1 === username2) //true


        //模板字符串与一般字符串的区别
        //和其他东西一起注入的时候，使用模板字符串方便注入
        // const person = {
        //         name: 'Cai',
        //         age: 19,
        //         sex: 'Female'
        //     }
        //     //一般字符串的做法
        // const info = '我叫' + person.name +
        //     ',我今年' + person.age +
        //  //     '岁了,' + '我的性别是' +
        //  person.sex;
        // console.log(info); //我叫Cai,我今年19岁了,我的性别是Female


        //输出多行字符
        //一般的字符串
        const info = '第一行\n第二行';
        console.log(info);

        //对于模板字符串 所有的空格 换行 缩进都会被保留在输出之中  怎么写就怎么输出
        const info1 = `第一行
        第二行`
        console.log(info1);
        //输出`和\等特殊字符
        //   const info = `\``;
        // console.log(info); //`
        //  const info = `\\`;
        //  console.log(info); //\


        //模板字符串的注入
        //${}
        //   const username = 'Cai';
        //   const person = {
        //       age: 19,
        //       sex: 'Female'
        //   }

        // const getSex = function(sex) {
        //         return sex === 'Female' ? '女' : '男';
        //  }
        //只要最终可以得出一个值的就可以通过${}注入到模板字符串中
        // const info = `${username},${person.age+2},${person.sex},${getSex(person.sex)}`;
        // console.log(info); //Cai,21,Female,女

        const username = 'Cai';
        const person = {
            age: 19,
            sex: 'Female'
        }

        const getSex = function(sex) {
            return sex === 'Female' ? 'Female' : 'Male'
        }

        //只要最终可以得出一个值的就可以通过${}注入到模板字符串中

        const result = `${username},${person.age-1},${getSex(person.sex)}`;
        console.log(result); //Cai,18,Female
    </script>
</body>

</html>